<template>
    <div>
    <ul>
        <li>
            <router-link to="/">
            <img src="../assets/img/bottom/zhuye.png" alt="">
                <br>
            <span>推荐</span>
            </router-link>
        </li>
        <li>
            <router-link to="/nice-goods-view">
            <img src="../assets/img/bottom/dianshang.png" alt="">
                <br>
                <span>电商</span>
            </router-link>
        </li>
        <li>
            <router-link to="/information-view">
            <img src="../assets/img/bottom/xiaoxi.webp" alt="">
                <br>
                <span>消息</span>
            </router-link>
        </li>
        <li>
            <router-link to="/shopping-cart-view">
            <img src="../assets/img/bottom/gouwuche.webp" alt="">
                <br>
                <span>购物车</span>
            </router-link>
        </li>
        <li>
            <router-link to="/my-message-view">
            <img src="../assets/img/bottom/wode.webp" alt="">
                <br>
                <span>我的</span>
            </router-link>
        </li>
    </ul>
    </div>
</template>

<script>
    export default {
        name: "NavComFls",

    }
</script>

<style scoped>
    div{
        width: 100vw;
        height: 50px;
        background:#fff;
        position: fixed;
        bottom: 0;
    }
    ul{
        width: 98%;
        list-style: none;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
    }
    li{
        width: 20%;
        text-align: center;
        }
    ul img{
        width: 40%;
        height: 50%;
    }
    span{
        font-size: 12px;
    }
</style>